<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录</title>
    <link rel="stylesheet" href="../css/elementUi.css">
    <link rel="stylesheet" href="../css/global.css">
    <style>
        .mask {
            height: 164px;
            width: 164px;
            background: rgba(255, 255, 255, 0.9);
            z-index: 48;
            position: absolute;
            margin-top: -167px;
            padding: -50%;
            text-align: center;
            color: rgb(41, 41, 41);
        }

        .login_type {
            width: 36px;
            float: right;
        }

    </style>
</head>
<body>
<div id="container">

    <i class="el-icon-error" @click="quit" style="color: #F56C6C;font-size: larger;position: absolute"></i>
    <div @click="toggleLoginType">
        <img v-if="loginType==='qrcode'" class="login_type" src="../image/password_login.png"/>
        <img v-else class="login_type" src="../image/qrcode_login.png"/>
    </div>
    <div style="padding-top: 10% ;padding-left: 3%;padding-right: 3%">
        <template v-if="loginType=='password'">
            <el-input placeholder="" v-model="email">
                <template slot="prepend">邮箱</template>
            </el-input>
            <br/>
            <br/>
            <el-input placeholder="" @keyup.enter.native="login" show-password v-model="password">
                <template slot="prepend">密码</template>
            </el-input>
            <br/>
            <br/>
            <br/>
            <el-button @click="login" type="primary" style="width: 100%" plain>登录</el-button>
            <br/>
            <br/>
            <el-button @click="register" style="width: 100%" plain>去注册</el-button>
            <!--            <div style="text-align: center;width: 100%;margin-top: 3px">-->
            <!--                <el-button circle @click="quit"><i class="el-icon-close"></i></el-button>-->
            <!--            </div>-->
        </template>
        <template v-else>
            <div style="width: 162px;height: 162px;margin: auto;" @click="getQrcode">
                <el-image
                        style="width: 160px; height: 160px;border: 2px solid #797878"
                        :src="qrcodeUrl">
                </el-image>
                <div class="mask" v-if="qrcodeStatus=='SCANNED'||qrcodeStatus=='EXPIRED'">
                    <i style="font-size: 30px;margin-top: 48px;"
                       :class="qrcodeStatus==='SCANNED'?'el-icon-circle-check':'el-icon-refresh-right'"></i>
                    <p style="font-size: 14px">{{qrcodeStatus == 'SCANNED' ? '请在App确认登录' : '请刷新二维码后重试'}} </p>
                </div>
            </div>

            <!--            <p>使用APP扫码登录</p>-->

        </template>
    </div>
    <div>
        <el-tag style=" cursor: pointer; text-align: center;width: 106%;margin-left: -8px;margin-top: 49px;margin-bottom: 3px"
                size="mini" @click="setting">服务器:{{serverPath}}
        </el-tag>
    </div>
</div>
</body>
<script src="../js/jquery.min.js"></script>
<script src="../js/util.js" type="module"></script>
<script src="../js/vue.js"></script>
<script src="../js/app.js"></script>
<script src="../js/elementUi.js"></script>

<script type="module">
    import {
        getStorage,
        setStorage,
        showLoading,
        network,
        hideLoading,
        showMessage,
        getDeviceId,
        getBrand, encodePassword,
        quitApp, globalData, removeStorage, getHttpPath
    } from "../js/util.js";

    let vm = new Vue({
        el: "#container",
        data: {
            email: '',
            password: '',
            loginType: 'password',//password,qrcode
            qrcodeUrl: '../image/hint.png',
            qrcodeStatus: "CREATED",
            uuid: '',
            serverPath: getHttpPath()
        },
        mounted() {
            let that = this;
            setTimeout(function () {
                that.checkLogin();
            }, 100)
        },
        methods: {
            quit() {
                quitApp();
            },
            setting() {
                window.location.href = "setting.html"
            },
            toggleLoginType() {
                if (this.loginType === 'password') {
                    this.loginType = 'qrcode'
                    this.getQrcode();
                } else {
                    this.loginType = 'password'
                }
            },
            register() {
                window.location.href = "register.html"
            },
            getQrcode() {
                let that = this;
                let url = getHttpPath() + '/account/qrcode/login?brand=' + getBrand()
                network(url, "GET", {}, function (data) {
                    that.qrcodeUrl = getHttpPath() + data.data.url;
                    that.qrcodeStatus = "CREATED"
                    that.uuid = data.data.uuid;
                    that.getQrcodeInfo(that.uuid);
                })

            },

            getQrcodeInfo(uuid) {
                let that = this;
                let url = getHttpPath() + '/account/qrcode/info/' + uuid
                network(url, "GET", {}, function (data) {
                    console.log(data)
                    that.qrcodeStatus = data.data.statusEnum;
                    if (that.qrcodeStatus === "CONFIRM") {
                        that.doLogin(data.data.loginDto)
                    }
                    if (that.qrcodeStatus === "CREATED" || that.qrcodeStatus === "SCANNED") {
                        setTimeout(function () {
                            that.getQrcodeInfo(that.uuid);
                        }, 1000)
                    }

                })
            },
            login() {
                let that = this;
                let url = getHttpPath() + '/account/login';
                console.log(vm.email + ":" + vm.password);
                showLoading(this, "正在登录", 5);
                network(url, "POST", {
                    email: vm.email,
                    password: encodePassword(vm.password),
                    deviceUid: getDeviceId(),
                    brand: getBrand()
                }, function (data) {
                    hideLoading();
                    that.doLogin(data.data);
                }, function (event, data) {
                    if (data.code === 401) {
                        hideLoading();
                        showMessage(that, "error", data.message);
                    }
                })
            },
            checkLogin() {
                let token = getStorage("token");
                let userId = getStorage("userId");
                if (token != null && userId != null && typeof token != 'undefined' && typeof userId != 'undefined') {
                    let url = getHttpPath() + '/auth/auth';
                    showLoading(this, "正在登录");
                    network(url, "POST", {
                        token: getStorage("token")
                    }, function (data) {
                        hideLoading();
                        window.location.href = "index.html"
                    }, function (event, data) {
                        hideLoading();
                        removeStorage("token");
                    })

                }

            },
            doLogin(result) {
                setStorage("token", result.token);
                setStorage("deviceId", result.deviceId);
                setStorage("disabled", result.disabled);
                setStorage("userId", result.userId);
                window.location.href = "index.html"
            }
        }


    })


</script>
</html>
